// select2样式修改
.select2-container--bootstrap {

    &.select2-container--focus,
    &.select2-container--open {
        .select2-selection {
            border-color: $select2-border-color
        }
    }

    .select2-dropdown {
        border-color: $select2-border-color
    }

    .select2-results__option--highlighted[aria-selected] {
        background-color: $select2-selected-bg;
    }

    .select2-selection--multiple .select2-selection__choice {
        background-color: $select2-selected-bg;
        border-color: $select2-border-color;
    }

    .select2-results__option[aria-disabled=true] {
        color: $select2-result-color;
    }
}

.search-panel {
    background: $search-panel-bg;
    box-shadow: $search-panel-shadow;
}

.select-list {
    ul {
        li {
            color: $search-panel-list-item-color;
            input {
                border: 1px solid $search-panel-list-item-border;
                &:focus {
                    border: 1px solid $search-panel-list-item-focus-border;
                }
            }

            select {
                border: 1px solid $search-panel-list-item-border;
            }
        }

    }
}

input[type=checkbox] {
    border: 1px solid $checkbox-border;
    &:checked {
        background-color: #fff;
        border: 1px solid $checkbox-border;

        &:before {
            color: $checkbox-checked-border;
            border-bottom: solid 2px currentColor;
            border-left: solid 2px currentColor;
        }
    }

    &:disabled {
        border-color: #ccc;
        background-color: #f7f7f7;

        &:checked {
            border-color: #eeeeee;
            background-color: #eeeeee;
        }
    }
}

input[type=radio] {
    border: 1px solid $radio-border;
    &:checked {
        background-color: #fff;
        border: 1px solid $radio-border;

        &:before {
            background-color: $radio-checked-border;
        }
    }

    &:disabled {
        border-color: #ccc;
        background-color: #f7f7f7;

        &:checked {
            border-color: #eeeeee;
            background-color: #eeeeee;
        }
    }
}

//切换样式
.toggle-switch {

    input[type=checkbox] {
        border: none!important;
        &::before {
            border: 2px solid $toggle-switch-border;
        }

        &::after {
            border: 2px solid $toggle-switch-border;
            background-color: $toggle-switch-bg;
        }

        &:checked::before {
            background-color: $toggle-switch-color-default;
            border-color: $toggle-switch-color-default;
        }

        &:checked::after {
            border-color: $toggle-switch-color-default;
        }
    }

    @mixin toggle-switch-styles($main-color) {
        input[type=checkbox] {

            &::before {
                border-color: $main-color;
            }

            &::after {
                border-color: $main-color;
            }

            &:checked::before {
                border-color: $main-color;
                background-color: $main-color;
            }

            &:checked::after {
                border-color: $main-color;
            }
        }
    }

    &.toggle-primary {
        @include toggle-switch-styles($toggle-switch-color-primary);
    }

    &.toggle-success {
        @include toggle-switch-styles($toggle-switch-color-success);
    }

    &.toggle-info {
        @include toggle-switch-styles($toggle-switch-color-info);
    }

    &.toggle-warning {
        @include toggle-switch-styles($toggle-switch-color-warning);
    }

    &.toggle-danger {
        @include toggle-switch-styles($toggle-switch-color-danger);
    }
}

//switch-radio切换选项
.switch-radio-group {
    .switch-radio {

        .switch-radio-title {
            border: 1px solid $switch-group-title-border;
            background-color: $switch-group-title-bg;
        }

        input[type=radio]:checked~.switch-radio-title {
            background-color: $switch-group-checked-bg;
            border-color: $switch-group-checked-border;
            color: $switch-group-checked-color;
        }
    }


    @mixin switch-radio-styles($bdcolor, $bgcolor) {
        .switch-radio {
            input[type=radio]:checked~.switch-radio-title {
                background-color: $bgcolor;
                border-color: $bdcolor;
                color: $switch-group-checked-color;
            }
        }
    }

    &.switch-radio-primary {
        @include switch-radio-styles($switch-radio-primary-border, $switch-radio-primary-bg);
    }

    &.switch-radio-success {
        @include switch-radio-styles($switch-radio-success-border, $switch-radio-success-bg);
    }

    &.switch-radio-info {
        @include switch-radio-styles($switch-radio-info-border, $switch-radio-info-bg);
    }

    &.switch-radio-warning {
        @include switch-radio-styles($switch-radio-warning-border, $switch-radio-warning-bg);
    }

    &.switch-radio-danger {
        @include switch-radio-styles($switch-radio-danger-border, $switch-radio-danger-bg);
    }


}

input.error,
textarea.error {
    border-color: $input-error-border;
}

.control-label.is-required:before {
    color: $required-fonts-color;
}

.form-header {
    color: $form-header-color !important;
    border-bottom: 1px solid $form-header-border;
}

.form-header-block {
    color: $form-header-color;
    &::before {
        background-color: $form-header-color;
    }
}


label {
    &.error {
        color: $form-label-error-color;
    }

    &.radio-error.error,
    &.checkbox-error.error {
        color: $form-label-error-color;
    }
}

// laydate重置样式

.layui-laydate.laydate-theme-reset {
    .layui-this {
        background-color: $laydate-main-color !important;
    }

    .layui-laydate-header i:hover,
    .layui-laydate-header span:hover {
        color: $laydate-main-color !important;
    }

    .layui-laydate-footer span:hover {
        color: $laydate-main-color !important;
    }
}


.layer-reset,
.layui-layer-prompt {
    .layui-layer-title {
        background: $layer-titile-bg;
        color: $layer-titile-color;
    }


    .layui-layer-btn {
        background: $layer-btn-box-bg;
        border-top: 1px $layer-btn-box-border solid;

        a {
            color: $layer-btn-default-color;
            border: 1px solid $layer-btn-default-bdcolor;
            background: $layer-btn-default-bgcolor;
        }

        .layui-layer-btn0 {
            color: $white-color;
            background: $layer-btn-default-bgcolor;
        }

        .layui-layer-btn1 {
            background: $layer-btn-first-bgcolor;
            color: $layer-btn-first-color;
            border: 1px solid $layer-btn-first-bdcolor;
        }

        .layui-layer-btn2 {
            background: $layer-btn-second-bgcolor;
            color: $layer-btn-second-color;
            border: 1px solid $layer-btn-second-bdcolor;
        }

        .layui-layer-btn3 {
            background: $layer-btn-third-bgcolor;
            color: $layer-btn-third-color;
            border: 1px solid $layer-btn-third-bdcolor;
        }
    }

}

// 加载框
.loaderbox {
    color: $loaderbox-color !important;
    border: 1px solid $loaderbox-border;
    background-color: $loaderbox-bgcolor;
    .loading-activity {
        border: solid 2px transparent;
        border-top-color: $loaderbox-color;
        border-left-color: $loaderbox-color;
    }
}


.icon-select-box {
    border: 1px solid #e5e6e7;
}

.ico-list {

    .fa:hover {
        background-color: $base-primary;
        color: #ffffff;
    }
}

div.tagsinput span.tag {
    background-color: $base-primary;
}


// 下拉树select-tree插件颜色重写样式

.select-tree-container.open .select-panel {
    border: 1px solid $form-input-focus-bdcolor;
    border-radius: 4px 4px 0 0;
}



.select-tree-container .tree-panel {
    border: 1px solid $form-input-focus-bdcolor;
    border-top: none;
}


.select-tree-container .tree-panel ul li .tree-option.selected::after {
    color: $base-primary;
}

.select-panel .select-value .select-item {
    background-color: $base-primary;
}

.select-tree-container .tree-panel ul li .tree-option.selected {
    background: mix($base-primary, $white-color, 5%);
}

.select-tree-container .tree-panel ul li .tree-option:hover {
    background: #f3f3f3;
}


// 个人资料页面样式
.profile-avatar-box {
    .profile-avatar-link {
        background-color: rgba($color: #000000, $alpha: 0.2);
        color: #ddd;
    }
}

// cropper头像裁剪窗口样式
.cropper-area {
    background: #f3f3f3;
}

.cropper-image-box {
    background: #e3e2e2;
}


.cropper-preview-box {
    width: 160px;
    height: 100px;
    overflow: hidden;
    background: #e3e2e2;
}